<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
	<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../../jquery-easyui-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.5.3/themes/icon.css"/>
    <script type="text/javascript" src="../../jquery-easyui-1.5.3/jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
	    var contextPath = function() {
	        return  "/" + location.pathname.split("/")[1];
	    }
	    
		function getValue(name){
			var str=window.location.search;
			if (str.indexOf(name)!=-1){
				var pos_start=str.indexOf(name)+name.length+1;
				var pos_end=str.indexOf("&",pos_start);
				if (pos_end==-1){
					return str.substring(pos_start);
				} else {
					return str.substring(pos_start,pos_end);
				}
			} else {
				return "";
			}
		}
		
		var  themeName = getValue("theme");
		if (themeName!=""){
		    var cssurl  = $('#easyuiTheme').attr('href');  
		    var href = cssurl.substring(0, cssurl.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';  
		    $('#easyuiTheme').attr('href', href);  
		}   
		
	    //将表单数据转为json
	    function form2Json(id) {
	        var arr = $("#" + id).serializeArray();
	        var jsonStr = "";
	        jsonStr += '{';
	        for (var i = 0; i < arr.length; i++) {
	            jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",'
	        }
	        jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
	        jsonStr += '}';
	        var json = JSON.parse(jsonStr);
	        return json;
	    }
	    
	    //将表单数据转为json格式的字符串，当然也可以JSON.stringify(data)
	    function form2JsonStr(id) {
	        var arr = $("#" + id).serializeArray();
	        var jsonStr = "";
	        jsonStr += '{';
	        for (var i = 0; i < arr.length; i++) {
	            jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",'
	        }
	        jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
	        jsonStr += '}';
	        return jsonStr;
	    }


	</script>

</head>

<style>
    .datagrid-btable{
        width:100%;
    }
    .datagrid-header-inner{
        width:100%;
    }
    .datagrid-header{
        width:100%;
    }
    .datagrid-htable{
        width:100%;
    }
    .datagrid-cell{margin:auto;}
    .fitem{text-align:left}
    .ftitle{text-align:center}
</style>

<body>

	<tr id="inputCB1" style="display: none">
		<td><label> 文件选择： </label></td>
		<td><input multiple style="width:300px" id="fileputHB" name="fileputHB" class="easyui-filebox" data-options='onChange:change_photo'></td>
		<a id="btn_upload" href="#" class="easyui-linkbutton" iconCls="icon-redo" >上传</a>
	</tr>
	<div id="Imgdiv"><img id="Img" /></div>

</body>

<script type="text/javascript">

    $(function () {
    	    
    });


function change_photo(){
        PreviewImage($("input[name='fileputHB']")[0], 'Img', 'Imgdiv');
    }

    function PreviewImage(fileObj,imgPreviewId,divPreviewId){
	    var allowExtention=".jpg,.bmp,.gif,.png";//允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
	    var extention=fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();
	    var browserVersion= window.navigator.userAgent.toUpperCase();
	    if(allowExtention.indexOf(extention)>-1){
	        if(fileObj.files){//HTML5实现预览，兼容chrome、火狐7+等
	            if(window.FileReader){
	                var reader = new FileReader();
	                reader.onload = function(e){
	                    document.getElementById(imgPreviewId).setAttribute("src",e.target.result);
	                }
	                reader.readAsDataURL(fileObj.files[0]);
	            }else if(browserVersion.indexOf("SAFARI")>-1){
	                alert("不支持Safari6.0以下浏览器的图片预览!");
	            }
	        }else if (browserVersion.indexOf("MSIE")>-1){
	            if(browserVersion.indexOf("MSIE 6")>-1){//ie6
	                document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
	            }else{//ie[7-9]
	                fileObj.select();
	                if(browserVersion.indexOf("MSIE 9")>-1)
	                    fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问
	                var newPreview =document.getElementById(divPreviewId+"New");
	                if(newPreview==null){
	                    newPreview =document.createElement("div");
	                    newPreview.setAttribute("id",divPreviewId+"New");
	                    newPreview.style.width = document.getElementById(imgPreviewId).width+"px";
	                    newPreview.style.height = document.getElementById(imgPreviewId).height+"px";
	                    newPreview.style.border="solid 1px #d2e2e2";
	                }
	                newPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
	                var tempDivPreview=document.getElementById(divPreviewId);
	                tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);
	                tempDivPreview.style.display="none";
	            }
	        }else if(browserVersion.indexOf("FIREFOX")>-1){//firefox
	            var firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
	            if(firefoxVersion<7){//firefox7以下版本
	                document.getElementById(imgPreviewId).setAttribute("src",fileObj.files[0].getAsDataURL());
	            }else{//firefox7.0+
	                document.getElementById(imgPreviewId).setAttribute("src",window.URL.createObjectURL(fileObj.files[0]));
	            }
	        }else{
	            document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
	        }
	    }else{
	        alert("仅支持"+allowExtention+"为后缀名的文件!");
	        fileObj.value="";//清空选中文件
	        if(browserVersion.indexOf("MSIE")>-1){
	            fileObj.select();
	            document.selection.clear();
	        }
	        fileObj.outerHTML=fileObj.outerHTML;
	    }
	}
</script>


</html>



